
<template>
    <div>
      <ul>
        <!-- <li><img src="https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg" width="100" /> </li>
        <li><img src="../assets/images/dogs/1.jpg" width="100" /> </li> -->
        <li v-for="(img) in images"><img :src="img.url" :id="img.id"/> </li>
      </ul>
      <!-- <vue-image-zoom ref="imageZoom" :zoom-options="zoomOptions"></vue-image-zoom> -->
    </div>
  </template>
   
  <script lang="ts" setup>
    import {reactive} from 'vue'
  
    let images = reactive(
        [
        { id: 1, url: '../src/assets/images/dogs/1.jpg' },
        { id: 2, url: '../src/assets/images/dogs/2.jpg' },
        { id: 3, url: '../src/assets/images/dogs/3.jpg' }
    ] 
    )
    
  </script>
  <style scoped>

    ul li img{
        display: inline-block;
        vertical-align:middle ;
        height:80px;
        margin:5px;
    }
  </style>